<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link href="/css/guanli.css" rel="stylesheet" type="text/css">
    </link>
</head>

<body>
    <div class="leftback" id="left">
        <div class="orderJuzao">
            <div class="orderJuzaoText">ORDER聚造</div>
            <img class="mulu" src="/image/mulu.png" alt="">
        </div>
        <div class="shouye">
            <img  src="/image/home.png" alt="">
            <div class="shouyeText">首页</div>
        </div>
        <div class="xtsz">
            <img src="/image/xtsj.png" alt="">
            <div class="shouyeText">系统设置</div>
            <img  class="jt" src="/image/jt.png" alt="">
        </div>
        <div class="xtsz1">
            <div class="xtsz1Text"  v-for="(item,index) in data1" @click="changeindex(index)" :class="{active:index==isShow}">
                {{item.xuanze}}
            </div>
        </div>
    </div>
    <div class="rightback" id="right">
        <div>
            <div class="right1">
                <div class="xtszAndrygl">系统设置 / 人员管理</div>
                <img src="./image/touxiang.png" class="touxiang">
                <div class="rightText">超级管理员</div>
                <div class="rightText1">小王，您好！</div>
                <div class="rightText2">
                    <img src="./image/tc.png" class="tc">
                    <div class="rightText22">退出</div>
                </div>
            </div>

            <div class="right2">
                <div class="rightRq">
                    <div class="rightRqText">日期</div>
                    <div class="rightxz" >
                        <input placeholder="请选择日期" class="rightxz1">
                        <img src="./image/rq.png" class="rq">
                    </div>
                    <img src="./image/ss.png" class="ss">
                    <img src="./image/sc.png" class="sc">
            </div>

            <div class="rightTable">
                <table class="rightTable1" bordercolor="#EFF6FC" frame=lhs,above  border="4">
                    <thead>
                        <tr>
                            <th class="tableHead" style="padding-left: 28px;">日期</th>
                            <th class="tableHead" style="padding-left:100px">姓名</th>
                            <th class="tableHead" style="width:750px;">地址</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr v-for="(item,index) in data1"  :class="{active1:index==tableIndex}" @click="changeBjColor(index)">
                            <td class="tableText1">{{item.date}}</td>
                            <td class="tableText2">{{item.name}}</td>
                            <td style="display: flex;">
                                <div class="tableText3">{{item.address}}</div>
                                <img src="./image/bianji.png" class="bj">
                                <img src="./image/sc.png" class="sc1"> 
                            </td>
                        </tr>
                        
                    </tbody>
                </table>
            </div> 

            <div class="rightPage">
                <div class="right31">
                    <div class="rightText3">共400条</div>
                    <div class="right311">
                        <div class="rightText33">100条/页</div>
                        <img src="./image/jtb.png" class="jtb"> 
                    </div> 
                </div>

                <div class="rightPage1">
                    <img src="./image/jtl.png" class="jtl">
                    <div class="rightPage11" v-for="(item, index) in page" >
                        <div class="rightPage111" @click="changepage(index)" :class="{active:index==isPage}">{{item}}</div>
                    </div>
                    <img src="./image/jtr.png" class="jtr">
                    
                    <div class="rightGo">
                        <div class="rightGo1">前往</div>
                        <div class="rightGo2">{{isPage+1}}</div>   
                        <div class="rightGo3">页</div>
                    </div> 
                    
                </div> 
        </div>

    </div>
</body>

</html>


<script>
    
    var app = new Vue({
        el:'#left',
        data:{
            isShow:-1,//激活状态，-1为未激活
            data1: [
                {xuanze:'单位管理'},
                {xuanze:'权限管理'},
                {xuanze:'菜单设置'},
                {xuanze:'人员管理'}
            ],
            
        },

        methods:{
            changeindex(index){
                console.log(index);
                this.isShow = index
            }
    }
    })


    var app1 = new Vue({
        el:'#right',
        data:{
            tableIndex:-1,//激活状态，-1为未激活
            isPage:-1,//当前页面下标是否激活
            data1:[
                {
                    date:'2016-05-01',
                    name:'王小虎1',
                    address:'上海市普陀区金沙江路21号'
                },
                {
                    date:'2016-05-02',
                    name:'王小虎2',
                    address:'上海市普陀区金沙江路22号'
                },
                {
                    date:'2016-05-03',
                    name:'王小虎3',
                    address:'上海市普陀区金沙江路23号'
                },
                {
                    date:'2016-05-04',
                    name:'王小虎4',
                    address:'上海市普陀区金沙江路24号'
                },
            ],
            page:[1,2,3,4],
        },

        methods:{

            changeBjColor(index){
                console.log(index);
                this.tableIndex = index
            },

            changepage(index){
                console.log(index);
                this.isPage = index 
            },

        }
            
    })
</script>